<template>
  <div class="home" ref="home">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="swiper_box">
      <swiper
        class="swiper-no-swiping"
        :options="swiperOption"
        ref="mySwiper"
        @slideChange="slideChange()"
      >
        <swiper-slide class="swiper-slide-defalut">
          <HomeBanner class="HomeBanner"></HomeBanner>
        </swiper-slide>
        <swiper-slide class="swiper-slide-defalut">
          <HomeMechanics class="HomeContent"></HomeMechanics>
        </swiper-slide>
        <swiper-slide class="swiper-slide-defalut">
          <HomeIntroduction class="HomeBanner"></HomeIntroduction>
        </swiper-slide>
        <swiper-slide class="swiper-slide-defalut" id="ahome">
          <HomeTrademark class="HomeBanner"></HomeTrademark>
        </swiper-slide>
      </swiper>
      <FooterBar class="footerBar" id="footer" v-show="isFalse"></FooterBar>
    </div>
    <div class="rightNavBar" v-show="isStyle">
      <div class="rightTopStyle">
        <div @click="goPhone" class="phoneBox" ref="treeWrap">
          <img
            src="./../../../assets/img/home/homePhoneIcon.png"
            class="homePhoneIcon"
          />
          <div class="fonsSize">电话</div>
          <div v-show="isPhone" class="downPhone">
            <div class="phoneName">联系电话</div>
            <div class="phoneNum">4008-188-191</div>
          </div>
        </div>
        <!-- <div @click="goCart" class="ShoppingCart">
          <img
            src="./../../../assets/img/home/homeShoppingIcon.png"
            class="homeShoppingIcon"
          />
          <div class="fonsSize">清单车</div>
          <span class="countNum" v-if="listData?listData.length>=1:null">{{listData.length}}</span>
        </div> -->
        <div class="cartBox">
          <div @click="toCart">
            <img
              src="./../../../assets/img/home/homeCartIcon.png"
              class="homeCartIcon"
            />
            <div class="fonsSize">留言</div>
          </div>
        </div>
      </div>
    </div>
    <div class="rightNavBar1" v-show="!isStyle">
      <div class="rightTopStyle1">
        <div @click="goPhone1" class="phoneBox1" ref="treeWrap1">
          <img
            src="./../../../assets/img/home/homePhoneIcon.png"
            class="homePhoneIcon"
          />
          <div class="fonsSize">电话</div>
          <div v-show="isPhone1" class="downPhone">
            <div class="phoneName">联系电话</div>
            <div class="phoneNum">4008-188-191</div>
          </div>
        </div>
        <!-- <div @click="goCart" class="ShoppingCart">
          <img
            src="./../../../assets/img/home/homeShoppingIcon.png"
            class="homeShoppingIcon"
          />
          <div class="fonsSize">清单车</div>
          <span class="countNum" v-if="listData?listData.length>=1:null">{{listData.length}}</span>
        </div> -->
        <div class="cartBox1">
          <div @click="toCart">
            <img
              src="./../../../assets/img/home/homeCartIcon.png"
              class="homeCartIcon"
            />
            <div class="fonsSize">留言</div>
          </div>
        </div>
        <div></div>
      </div>
      <!-- 回到顶部的按钮 -->
      <div class="rightBottomStyle1" @click="goTop">
        <img
          src="./../../../assets/img/home/homePositionIcon.png"
          class="homePositionIcon"
        />
      </div>
    </div>
    <!-- 下一页按钮 -->
    <div @click="nextSwiper" v-show="bottomBtn">
      <lottie
        :height="49"
        :width="49"
        class="iconImg"
        :options="defaultOptions"
      />
    </div>
  </div>
</template>

<script>
const animationData = require("@/assets/js/data.json");
import NavBarHeader from "../../../components/NavBarHeader";
import HomeBanner from "./Homebanner";
import HomeMechanics from "./HomeMechanics";
import HomeIntroduction from "./HomeIntroduction";
import HomeTrademark from "./HomeTrademark";
import FooterBar from "../../../components/FooterBar";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import ContactDialog from "./../../../components/ContactDialog";
export default {
  //   metaInfo: {
  //     title: '轰隆隆官网首页',
  //     meta: [
  //         {
  //             name: 'keywords',
  //             content: 'vue,前端技术,测试一下'
  //         },
  //         {
  //             name: 'description',
  //             content: '这是关于预渲染的首页'
  //         }
  //     ]
  // },
  name: "Home",
  data() {
    return {
      // name: '预渲染的实现',
      isPhone: false, // 电话弹窗隐藏显示
      isPhone1: false,
      isStyle: true, // 控制右边小导航隐藏显示
      showContactPop: false,
      listData: [], //缓存存储的购物车数据
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      swiperOption: {
        // pagination:'.swiper-pagination',
        notNextTick: true, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: "vertical", // 水平方向移动
        grabCursor: false, // 鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: true, // Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        slidesPerView: 1, // 设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        observer: true,
        initialSlide: 0,
        mousewheel: false, // 开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
        height: window.innerHeight, // 高度设置，占满设备高度
        // autoHeight: true, // 高度随内容变化
        resistanceRatio: 0, // 抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
        observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
        // autoplayDisableOnInteraction: false, //鼠标划过之后继续轮播
        speed: 1000, // 滚动速度
      },
      defaultOptions: { animationData: animationData, loop: true },
      defalut_top: 0,
      isFalse: false,
      bottomBtn: true,
      activeIndex: "",
    };
  },
  components: {
    NavBarHeader,
    HomeBanner,
    HomeMechanics,
    HomeIntroduction,
    HomeTrademark,
    Swiper,
    SwiperSlide,
    FooterBar,
    ContactDialog,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    this.$refs.mySwiper.$swiper.mousewheel.enable();
    this.listData = JSON.parse(window.localStorage.getItem("listData"));
    // 控制右侧弹窗点击任何地方可以关闭电话弹窗
    document.addEventListener("mouseup", (e) => {
      let tree = this.$refs.treeWrap;
      let tree1 = this.$refs.treeWrap1;
      if (tree) {
        if (!tree.contains(e.target)) {
          this.isPhone = false;
        }
      }
      if (tree1) {
        if (!tree1.contains(e.target)) {
          this.isPhone1 = false;
        }
      }
    });
  },
  methods: {
    handleAnimation: function (animate) {
      this.animObj = animate;
      console.log(animate); //这里可以看到 lottie 对象的全部属性
    },
    // 鼠标滑轮滚动
    scrollFunction() {
      this.domObj = document.getElementById("ahome"); // 通过id获取要设置的div
      if (this.domObj.attachEvent) {
        // IE
        this.domObj.attachEvent("onmousewheel", this.mouseScroll);
      } else if (this.domObj.addEventListener) {
        this.domObj.addEventListener("DOMMouseScroll", this.mouseScroll, false);
      }
      this.domObj.onmousewheel = this.domObj.onmousewheel = this.mouseScroll;
    },
    mouseScroll(event) {
      // google 浏览器下
      let detail = event.wheelDelta ? event.wheelDelta : 0 || event.detail; // 判读滚动方向
      if (detail > 0 && !this.i) {
        this.$router.afterEach((to, from, next) => {
          window.scrollTo(0, 0);
        });
        this.$refs.mySwiper.$swiper.mousewheel.enable();
      }
    },
    slideChange(e) {
      const activeIndex = this.$refs.mySwiper.$swiper.activeIndex;
      if (activeIndex === 3) {
        // 往下翻页的箭头
        this.bottomBtn = false;
        this.isFalse = true;
        this.$refs.mySwiper.$swiper.mousewheel.disable();
        this.scrollFunction();
      } else {
        this.isFalse = false;
        this.bottomBtn = true;
      }
      if (activeIndex > 0) {
        this.isStyle = false;
      } else if (activeIndex == 0) {
        this.isStyle = true;
      }
    },
    handleScroll() {
      // 页面滚动距顶部距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var scroll = scrollTop - this.i;
      this.i = scrollTop;
      if (scroll < 0) {
        if (scrollTop < 10) {
          this.$refs.mySwiper.$swiper.mousewheel.enable();
        }
      }
    },
    // 电话弹窗
    goPhone(e) {
      this.isPhone = !this.isPhone;
    },
    goPhone1(e) {
      this.isPhone1 = !this.isPhone1;
    },
    // 留言板
    toCart() {
      const shangQiaoButton = document.getElementById("nb_invite_ok");
      if (shangQiaoButton && shangQiaoButton.click) {
        shangQiaoButton.click();
      }
    },
    goCart() {
      this.$router.push({ path: "/MechanicalCart" });
    },
    // 下一个按钮
    nextSwiper() {
      const activeIndex = this.$refs.mySwiper.$swiper.activeIndex;
      this.$refs.mySwiper.$swiper.slideNext();
      // 跳转到footerBar
      if (activeIndex == 3) {
        document.querySelector("#footer").scrollIntoView(true);
      }
      this.isFalse = true;
    },
    // 回到顶部
    goTop() {
      this.$refs.mySwiper.$swiper.slideTo(0, 1000, false); //切换到第一个slide，速度为1秒
      this.$refs.mySwiper.$swiper.mousewheel.enable();
      this.isFalse = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.iconImg {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 49px;
  height: 49px;
  z-index: 10;
}
.swiper_box {
  position: relative;
}
.swiper-slide-defalut {
  height: 100vh;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
}
.home {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  // position: relative;
}
.homeBanner {
  object-fit: cover;
  width: 100%;
  height: 100vh;
}
.HomeContent {
  object-fit: cover;
  width: 100%;
  height: 100vh;
  transform: translate3d(0, 0, 0);
  margin: 0 auto;
}
.navBarHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.footer-swiper {
  height: 336px !important;
}
.rightTopStyle {
  width: 60px;
  height: 180px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  z-index: 1000;
  position: absolute;
  right: 20px;
  bottom: 170px;
  color: #fff;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}
.rightBottomStyle {
  border-radius: 30px;
  width: 60px;
  height: 50px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 1000;
  position: absolute;
  right: 20px;
  bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}
.rightTopStyle1 {
  width: 60px;
  height: 170px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 30px;
  z-index: 1000;
  position: absolute;
  right: 20px;
  bottom: 170px;
  color: #fff;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}
.rightBottomStyle1 {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  z-index: 1000;
  position: absolute;
  right: 20px;
  bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}
.phoneBox {
  position: relative;
  cursor: pointer;
}
.phoneBox1 {
  margin-top: 10px;
  position: relative;
  cursor: pointer;
}
.downPhone {
  background: url("./../../../assets/img/home/phoneBox.png") no-repeat;
  background-size: 100%, 100%;
  width: 306px;
  height: 145px;
  position: absolute;
  right: 40px;
  bottom: -80px;
  z-index: 200;
}
.phoneName {
  font-size: 16px;
  color: #333;
  margin-top: 35px;
}
.phoneNum {
  font-size: 26px;
  color: #333;
  font-weight: 500;
  margin-top: 17px;
}
.footerStyle {
  z-index: 100;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.footerIcon {
  width: 49px;
  height: 48px;
}
.cartBox {
  position: relative;
}
.cartBox1 {
  position: relative;
  margin-top: 15px;
}
.cartContent {
  width: 610px;
  height: 440px;
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #eeeeee;
  position: absolute;
  right: 100px;
  bottom: -100px;
  color: #333;
  z-index: 200;
}
.cartTitleBg {
  width: 100%;
  height: 56px;
  line-height: 56px;
  background: #1c1e2b;
  border-radius: 8px 8px 0px 0px;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
}
.cratName {
  margin-left: 40px;
}
.styleHeight {
  width: 33px;
  height: 3px;
  background: #fff;
  margin-right: 40px;
  cursor: pointer;
}
.inputHeightBox {
  padding-top: 44px;
  margin: 0 40px;
  box-sizing: border-box;
}
.inputClass {
  margin-bottom: 20px;
}
.selectClass {
  width: 100%;
}
.sendOut {
  width: 149px;
  height: 40px;
  line-height: 40px;
  background: #ff855b;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin: 40px auto 0 auto;
}
.homeCartIcon {
  cursor: pointer;
}
.homePositionIcon {
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.ShoppingCart {
  cursor: pointer;
  position: relative;
}
.homePhoneIcon {
  width: 32px;
  height: 32px;
}
.homeShoppingIcon {
  width: 32px;
  height: 32px;
}
.homeCartIcon {
  width: 32px;
  height: 32px;
}
.fonsSize {
  font-size: 12px;
  color: #fff;
}
.countNum {
  width: 18px;
  height: 18px;
  background: #f56c6c;
  border-radius: 12px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  color: #fff;
}
</style>
